<% cache_if(@tag_ids.size <= 1, page: @page, action_suffix: list_cache_name(@role, @tag_ids)) do %>

  <div id="page-config" class="hidden">
    <div class="title"><%= t '.problems_list' %></div>
    <div class="problem-active">true</div>
  </div>

  <% if @total_page > 1 %>
    <% from = [@page - 7, 1].max %>
    <% to = [from + 15, @total_page].min %>
    <div class="pagination">
      <ul>
        <% from.upto(to) do |x| %>
          <li<%= raw(x == @page ? %q{ class="active"} : '') %>>
            <%= link_to x.to_s, problems_list_path(x.to_s, @tag_hash) %>
          </li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <table id="problems-list" class="table table-hover">
    <thead>
    <tr>
      <th style="width: 5%;"></th>
      <th class="center sortable" style="width: 5%;"><a href="#"><%= t '.id' %></a></th>
      <th style="width: 30%;" class="title"><%= t '.title' %></th>
      <th><%= t '.source' %></th>
      <th class="center sortable" style="width: 10%;"><a href="#"><%= t '.accepted_submissions' %></a></th>
      <th class="center sortable" style="width: 10%;"><a href="#"><%= t '.attempted_submissions' %></a></th>
      <th class="center sortable" style="width: 10%;"><a href="#"><%= t '.accepted_ratio' %></a></th>
    </tr>
    </thead>
    <tbody>
    <% @problems.each do |problem| %>
      <tr data-id="<%= problem.id %>">
        <td class="icon">
          <% if admin? %>
            <% if problem.status == 'hidden' %>
              <span style="color: grey;"><i class="iconic-lock-stroke"></i></span>
            <% elsif problem.status == 'advanced' %>
              <span style="color: grey;"><i class="iconic-star"></i></span>
            <% end %>
          <% else %>
            <span class="hidden accepted" style="color: limegreen;"><i class="iconic-check"></i></span>
            <span class="hidden unaccepted" style="color: lightcoral;"><i class="iconic-x"></i></span>
          <% end %>
        </td>
        <td class="center"><%= problem.id %></td>
        <td class="title"><%= link_to problem.title, problems_show_path(problem.id), target: '_blank' %></td>
        <td><%= problem.source %></td>
        <td class="center accepted-submissions"><%= problem_accepted_submissions_link '', problem.id %></td>
        <td class="center attempted-submissions"><%= problem_attempted_submissions_link '', problem.id %></td>
        <td class="center ratio"></td>
      </tr>
    <% end %>
    </tbody>
  </table>

  <% if @total_page > 1 %>
    <% from = [@page - 7, 1].max %>
    <% to = [from + 15, @total_page].min %>
    <div class="pagination">
      <ul>
        <% from.upto(to) do |x| %>
          <li<%= raw(x == @page ? %q{ class="active"} : '') %>>
            <%= link_to x.to_s, problems_list_path(x.to_s, @tag_hash) %>
          </li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div id="toolbar" class="hidden">
    <ul class="nav pull-right">
      <% if admin? %>
        <li>
          <a id="new-problem-button" href="#new-problem-dialog" data-toggle="modal" style="outline: none;"><%= t '.add_problem' %></a>
        </li>
      <% end %>
      <li>
        <a id="filter-button" href="#filter-dialog" data-toggle="modal" style="outline: none;"><%= t '.filter' %></a>
      </li>
    </ul>
  </div>

  <% if admin? && @tag_ids.empty? %>
    <% cache(action_suffix: 'new_dialog') do %>
      <%= render 'problems/new_dialog' %>
    <% end %>
  <% end %>

<% end %>

<% role = @current_user ? @current_user.role : 'normal_user' %>
<% cache(action_suffix: "filter_dialog/#{role}") do %>
  <div id="filter-dialog" class="modal hide fade">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h3><%= t '.filter' %></h3>
    </div>
    <div class="modal-body">
      <%= form_tag problems_list_path, method: :get, id: 'filter-form' do %>
        <div class="row-fluid">
          <% tags = Tag.valid_entry(role) %>
          <% 4.times do |x| %>
            <div class="span3">
              <% tags.each_with_index do |tag, index| %>
                <% if index % 4 == x %>
                  <label class="checkbox">
                    <%= check_box_tag tag.id.to_s, '1', false, name: "tag_#{tag.id}" %>
                    <span><%= tag.name %></span>
                  </label>
                <% end %>
              <% end %>
            </div>
          <% end %>
        </div>
        <div id="alert-message" class="hidden"><%= t '.filter_dialog.filter_alert' %></div>
      <% end %>
    </div>
    <div class="modal-footer">
      <a data-dismiss="modal" class="btn"><%= t '.filter_dialog.close' %></a>
      <button class="btn btn-primary submit" data-toggle="tooltip" title="<%= t '.filter_dialog.filter_info' %>">
        <%= t '.filter_dialog.submit' %>
      </button>
    </div>
  </div>
<% end %>

<%= json_div_tag('problems_stat', @problems.map { |problem| [
        problem.id, problem.accepted_submissions, problem.attempted_submissions
] }) %>

<%= json_div_tag 'tag_ids', @tag_ids %>

<% if @current_user && !admin? %>
  <%= json_div_tag 'accepted_problem_ids', @current_user.accepted_problem_ids %>
  <%= json_div_tag 'attempted_problem_ids', @current_user.attempted_problem_ids %>
<% end %>
